<!--
 * @Author       : ionluo(2437403125@qq.com)
 * @Description  :
 * @Date         : 2024-08-08 20:36:13
-->
<!-- 水球图：https://github.com/ecomfe/echarts-liquidfill/tree/v2.0.6 -->
<template>
  <div id="liquidfill"></div>
</template>

<script>
import 'echarts-liquidfill'

export default {
  data () {
    return {
    }
  },
  mounted () {
    const data = [0.46]
    const chart = this.$echarts.init(document.getElementById('liquidfill'))
    chart.setOption({
      series: [{
        type: 'liquidFill',
        data,
        radius: '80%',
        label: { // 水球图内部文字
          fontSize: 36,
          color: '#999',
          fontWeight: 'normal',
          insideColor: '#fff', // 文字和波浪重叠部分的颜色
          position: ['50%', '50%'],
          formatter: v => {
            return `${Math.floor(v.data * 100)}%`
          }
        },
        outline: { // 水球图的轮廓线，与css的outline一致
          borderDistance: 0, // 距离
          itemStyle: {
            borderWidth: 1,
            borderColor: '#aaa4a4',
            shadowBlur: 0,
            shadowColor: '#fff'
          }
        },
        backgroundStyle: { // 水球图背景色
          color: '#fff'
        },
        itemStyle: { // 当前数据的默认样式，如果有多组数据的话要定制样式见：https://github.com/ecomfe/echarts-liquidfill?tab=readme-ov-file#data-numberobject
          shadowBlur: 0,
          shadowColor: '#fff'
        },
        amplitude: 8, // 波纹的振幅
        color: [this.getColor(data[0])] // 波纹的颜色
      }]
    })
  },
  methods: {
    getColor (value) {
      if (value <= 0.5) return 'rgba(97,216,0,.7)'
      if (value > 0.5 && value <= 0.8) return 'rgba(204,178,26,.7)'
      if (value > 0.8) return 'rgba(241,47,28,.7)'
    }
  }
}
</script>

<style lang="scss" scoped>
#liquidfill {
  width: 100%;
  height: 100%;
}
</style>
